<template>
  <div>
    {{message}}
    <component-a></component-a>
  </div>
</template>
<script>
import Vue from 'Vue';
//在子组件中，使用 this.$parent可以直接访问该组件的父实例或组件，父组件也可以通过 this.$children 访问它
//所有的子组件，而且可以递归向上或向下无限访问，直到根实例或最内层的组件
export default {
  data(){
    return{
      message: '',
    }
  },
  mounted(){
  },
  components:{
    'component-a':{
      template: '<button @click="handleEvent">通过父链直接修改数据</button>',
      methods: {
        handleEvent(){
          //访问到父链后，可以做任何操作，比如直接修改数据
          this.$parent.message = '来自组件 component-a 的内容';
        }
      }
    }
  }
}
</script>
<style scoped>

</style>


